<template>
  <div class="hm-comment-item" v-if="Object.keys(item).length">

    <!-- 评论用户信息 -->
    <div class="comment-info">
      <img class="user-img" :src="item.user.head_img | imgUrl" alt="">
      <div class="comment-info-desc">
        <div class="comment-user-nickname">{{ item.user.nickname }}</div>
        <div class="comment-time">{{ item.create_date | fromNow }}</div>
      </div>
      <div class="reply" @click="reply(item.id, item.user.nickname)">回复</div>
    </div>

    <!-- 递归父评论区域 -->
    <hm-comment-parent :value="item.parent" v-if="item.parent"></hm-comment-parent>

    <!-- 评论内容 -->
    <div class="comment-content">{{ item.content }}</div>
  </div>
</template>

<script>
import HmCommentParent from 'components/hm-comment-parent.vue'

export default {
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  components: {
    HmCommentParent
  },

  methods: {
    reply (parentId, nickname) {
      this.$emit('reply', parentId, nickname)
    }
  }
}
</script>

<style lang="scss" scoped>
.hm-comment-item {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  .comment-info {
    display: flex;
    height: 35px;
    margin-bottom: 14px;
    .user-img {
      width: 35px;
      height: 35px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .comment-info-desc {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .comment-user-nickname {
        font-size: 14px;
        color: #000;
      }
      .comment-time {
        font-size: 12px;
        color: #707070;
      }
    }

  }
  .comment-content {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
}
</style>
